
import {GuiKeys} from "../../../script/controller/model/ControllerOpt";
import Configer from "../../../script/frame/apiModel/config/Configer";
import {UIConfigKey} from "../../../script/constant/UIConfig";
import * as React from "../../../script/frame/apiModel/gui/React";
import {ResourceKey} from "../../../script/constant/ResourceConstant";
import {IProps, View} from "../../../script/frame/apiModel/gui/React";
import {CodeUtil} from "../../../script/frame/codeAdapter/CodeUtil";

export enum InfoPageType {
    pos = 1,
    center,
}

interface IProp {

}
interface IState {
    x: number,
    y: number,
    title: string,
    subtitle?: string,
    des?: string,
    pageType?: InfoPageType,
}

export default class InfoPage extends React.Element<IProp, IState> {

    constructor(props: IProp & IProps) {
        super(props);
        this.setState({
            x: 0,
            y: 0,
            title: '',
            subtitle: '',
            des: '',
            pageType: InfoPageType.pos,
            visible: false,
        })
    }

    render = () => {
        const yMargin = 0.01660;
        const backSize = { h: 0, w: 0.3 }
        let backPos = { x: this.state.x, y: this.state.y };
        const pageType = this.state.pageType;
        if (pageType && pageType === InfoPageType.center) {
            backPos.x = 0.5 - 0.3 / 2;
            backPos.y = 0.5;
        }
        const xPadding = 0.01250;
        const fontSize = Configer.getUIConfig(UIConfigKey.fontSize);
        let retStr = '';
        const name = this.state.title;
        if (name) {
            retStr = retStr + `${name}\n\n`;
        }
        if (this.state.subtitle) {
            const subtitleLineStr = this.state.subtitle;
            retStr = retStr + `${subtitleLineStr}\n`;
        }
        if (this.state.des) {
            const descriptLineStr = this.state.des;
            retStr = retStr + `${descriptLineStr}\n`;
        } else {
            const descriptLineStr = '描述为空';
            retStr = retStr + `${descriptLineStr}\n`;
        }
        const retLineArr = CodeUtil.autoLineBreak(retStr, backSize.w, fontSize)
        const retLineNum = retLineArr.length - 1;
        const retSize = { h: retLineNum * fontSize, w: backSize.w }
        backSize.h = backSize.h + retSize.h + yMargin * 2;
        const goodInfoPagePath = Configer.getResource(ResourceKey.infoPagePath);

        return <View   key={GuiKeys.infoPage} style={{ hidden: !this.state.visible, backgroundImage: goodInfoPagePath, left: backPos.x, top: backPos.y, width: backSize.w, height: backSize.h }}>
            <View   key={GuiKeys.InfoPageText} style={{ paddingL: xPadding, paddingR: xPadding, marginT: yMargin, width: retSize.w, height: retSize.h }}>{retStr}</View>
        </View>
    }
}